<template>
  <div >
    <div class="head-sculpture">
      <el-row class="demo-avatar demo-basic">
        <el-col :span="5"  >
          <el-upload
              class="avatar-uploader"
              action="http://localhost:8088//File/upload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-col>
        <el-col :span="3">
          <div class="userinfoName">
            <el-row >
              {{user.account}}
              <input class="jianming"
                     placeholder="编辑我的个人签名"
                     v-model="input"
                     size="mini"
                     clearable>
            </el-row>
          </div>
        </el-col>
      </el-row>
    </div>

    <div>
      <el-tabs v-model="activeName" @tab-click="handleClick" class="table-bottom"  stretch>
        <el-tab-pane label="用户管理" name="first">
          <div class="first-row">

            <el-descriptions class="margin-top" title="我的信息" :column="3" :size="size" border >
              <template slot="extra">
                <el-button type="primary" size="small" @click="caozuo">修改个人信息</el-button>
              </template>

              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-user"></i>
                  用户名
                </template>
                {{user.account}}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-mobile-phone"></i>
                  手机号
                </template>
                {{user.phone}}
              </el-descriptions-item>

              <!-- <el-descriptions-item prop="gender"    label="性别">
                <template slot-scope="scope">
                  <i class="el-icon-location-outline"></i>
                  性别
                </template>
                    <span v-if="scope.row.gender==1" >男</span>
                    <span v-else-if="scope.row.gender==2" >女</span>
              </el-descriptions-item> -->
              <!--            <el-descriptions-item>-->
              <!--              <template slot="label" >-->
              <!--                &lt;!&ndash; <template slot-scope="scope"> &ndash;&gt;-->
              <!--                <i class="el-icon-location-outline"></i>-->
              <!--                性别-->
              <!--              </template>-->
              <!--              {{user.data.data.gender==2?"女":"男"}}-->
              <!--            </el-descriptions-item>-->
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-tickets"></i>
                  等级
                </template>
                <el-tag size="small">{{user.grade}}</el-tag>
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-office-building"></i>
                  地址
                </template>
                {{user.province}}-{{user.city}}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-office-building"></i>
                  用户分类
                </template>
                {{user.role}}
              </el-descriptions-item>

            </el-descriptions>

          </div>
        </el-tab-pane>
        <!-- <el-tab-pane label="主页" name="second">

        </el-tab-pane> -->
        <el-tab-pane
            label="订单管理"
            name="third"
        >
          <el-table
              :data="tableData"
              style="width: 100%"
              height="250">
            <el-table-column
                fixed
                prop="did"
                label="订单编号"
                width="150">
            </el-table-column>
            <el-table-column

                prop="date"
                label="日期"
                width="150">
            </el-table-column>
            <el-table-column
                prop="name"
                label="姓名"
                width="120">
            </el-table-column>
            <el-table-column
                prop="province"
                label="省份"
                width="120">
            </el-table-column>
            <el-table-column
                prop="city"
                label="市区"
                width="120">
            </el-table-column>
            <el-table-column
                prop="address"
                label="地址"
                width="300">
            </el-table-column>
            <el-table-column
                prop="zip"
                label="电话"
                width="120">
            </el-table-column>
          </el-table>

        </el-tab-pane>
        <el-tab-pane label="评价/售后" name="fourth">
          <el-table
              :data="shouhouData"
              style="width: 100%">
            <el-table-column
                fixed
                prop="date"
                label="日期"
                width="150">
            </el-table-column>
            <el-table-column
                prop="name"
                label="姓名"
                width="120">
            </el-table-column>
            <el-table-column
                prop="province"
                label="省份"
                width="120">
            </el-table-column>
            <el-table-column
                prop="city"
                label="市区"
                width="120">
            </el-table-column>
            <el-table-column
                prop="address"
                label="地址"
                width="300">
            </el-table-column>
            <el-table-column
                prop="zip"
                label="电话"
                width="120">
            </el-table-column>
            <el-table-column
                prop="pingjia"
                label="我的评价"
                width="120">
            </el-table-column>
            <el-table-column
                fixed="right"
                label="操作"
                width="100">
              <template slot-scope="scope">
                <el-button @click="pingjiaClick(scope.row)" type="text" size="small">
                  <el-link  >评价</el-link>
                </el-button>
                <el-button type="text" size="small">
                  <el-link>客服</el-link>
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <!--        <el-tab-pane label="我的钱包" name="fifth">-->
        <!--          <div>-->
        <!--            <el-row :gutter="20">-->
        <!--              <el-col :span="8">-->
        <!--                <div class="yue">-->
        <!--                  <i class="el-icon-s-finance"></i>-->
        <!--                  <el-row style="font-size: 20px;">-->
        <!--                    余额:{{user.data.data.ubalance}}-->
        <!--                  </el-row>-->
        <!--                </div>-->
        <!--              </el-col>-->
        <!--              <el-col :span="8">-->
        <!--                <div class="yue">-->
        <!--                  <i class="el-icon-sell"></i>-->
        <!--                  <el-row style="font-size: 20px;">-->
        <!--                    月支出:{{user.data.data.pay}}-->
        <!--                  </el-row>-->
        <!--                </div>-->
        <!--              </el-col>-->
        <!--              <el-col :span="8">-->
        <!--                <div class="yue">-->
        <!--                  <i class="el-icon-coin"></i>-->
        <!--                  <el-row style="font-size: 20px;">-->
        <!--                    总积分:1082-->
        <!--                  </el-row>-->
        <!--                </div>-->
        <!--              </el-col>-->
        <!--            </el-row>-->
        <!--          </div>-->

        <!--        </el-tab-pane>-->
      </el-tabs>
    </div>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
import {getUserByAccount} from '../../../../api/user'
export default {
  name: 'user',
  computed: {
    ...mapGetters({
      userRole: 'user/getUserRole',
      userAccount: 'user/getUserAccount',
      userId: 'user/getUserId'
    })
  },
  methods: {
    // 头像上传
    handleAvatarSuccess (res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    // 获取信息
    fetchUser () {
      // 通过账号从API获取用户数据
      const accountNumber = this.userAccount
      // 示例中使用axios进行HTTP请求
      getUserByAccount(accountNumber)
          .then(response => {
            this.user = response
          })
          .catch(error => {
            console.error('获取用户数据时出错:', error)
          })
    },
    handleClick (tab, event) {
      console.log(tab, event)
    },
    // 下部
    // 用户信息
    caozuo () {
      this.$router.push('/main/update')
    }

  },
  mounted () {
    this.fetchUser()
  },
  data () {
    return {
      like: true,
      shouhouData: [{
        date: '2016-05-02',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333,
        pingjia: '棒'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1517 弄',
        zip: 200333,
        pingjia: '棒'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1519 弄',
        zip: 200333,
        pingjia: '棒'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1516 弄',
        zip: 200333,
        pingjia: '棒'
      }],
      tableData: [{
        did: 1,
        date: '2020-05-03',
        name: 'admin',
        province: '陕西',
        city: '西安',
        address: '陕西省西安市太乙路',
        zip: 18078665174
      }, {
        did: 2,
        date: '2023-07-22',
        name: 'tom',
        province: '江苏',
        city: '徐州',
        address: '江苏省徐州市',
        zip: 18096885110
      }, {
        did: 3,
        date: '2023-04-14',
        name: 'jack',
        province: '陕西',
        city: '西安',
        address: '陕西省西安市碑林区太乙路',
        zip: 13579025959
      }, {
        did: 4,
        date: '2020-07-01',
        name: 'lihua',
        province: '陕西',
        city: '西安',
        address: '陕西省西安市碑林区太乙路',
        zip: 18999005535
      }, {
        did: 5,
        date: '2022-08-07',
        name: '小明',
        province: '陕西',
        city: '西安',
        address: '陕西省西安市碑林区太乙路',
        zip: 18686861212
      }, {
        did: 6,
        date: '2007-06-07',
        name: '小红',
        province: '陕西',
        city: '西安',
        address: '陕西省西安市碑林区太乙路',
        zip: 18999007819
      }, {
        did: 7,
        date: '2006-07-08',
        name: '小亮',
        province: '陕西',
        city: '西安',
        address: '陕西省西安市碑林区太乙路',
        zip: 19688665542
      }],
      imageUrl: '',
      user: {
      },
      circleUrl: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
      // 下部
      activeName: 'first'
    }
  }
}
</script>
<style scoped>
/* 头像 */
.avatar-uploader{
  margin-left: 0px;
  /* border: 1px dashed #666; */
  width: 178px;
  height: 178px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d92323;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  margin-top: 20px;
  width: 100px;
  height: 100px;
  display: block;
}
/*签名  */
.jianming{
  width: 200px;
  background-color: rgb(218, 220, 232);
  border: 0;
  text-align: center;
  font-size: 15px;
  color: #060606;
  outline: none;
  border-radius: 10px;
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.head-sculpture{
  margin-left: 0px;
  /*background-image: url("src/assets/images/preview.jpg");*/
}
.userinfoName{
  margin-top: 20px;
  color: aliceblue;
  font-size: 40px;
  margin-left: -100px;
  font-weight: normal;

}
::v-deep .el-tabs__nav-scroll{
  margin-left: 200px;
  width: 50%;
}
.first-row{
  margin-left: 0px;
}

.like {
  cursor: pointer;
  font-size: 25px;
  display: inline-block;
}
.yue{
  font-size: 50px
}

</style>
